JavaScript ポップアップメニュー

このページにはポップアップメニューがあり、ページやURLを選択できます。

JavaScript は Netscape Navigator 2.0 以降と、Internet Explorer for MacOS 3.0.1 以降でのみ使用可能なことに注意してください。
あなたの観客の全てが JavaScript 対応のブラウザを使用しているわけではありません。.

この例では、他のページにリンクするポップアップメニューを作るのに JavaScript を使用する方法を示しています。

ノート：ローカルディスクに保存したこのページをInternet Explorer を使用してロードするとうまく表示されません。ウェブサーバーに保存されたページはうまく表示されます。

使い方

ポップアップメニューのソースは以下のようなものです： 

<FORM>
<SELECT NAME="menu">
<OPTION VALUE="index.html" SELECTED>目次 
<OPTION VALUE="groucho.html">Groucho 
<OPTION VALUE="harpo.html">Harpo 
<OPTION VALUE="chico.html">Chico 
<OPTION VALUE="zeppo.html">Zeppo 
</SELECT>

<INPUT TYPE=Button VALUE="Go" 
onClick="top.location.href = 
this.form.menu.options[this.form.menu.selectedIndex].value">
</FORM>

OPTION タグに含まれている行を編集して、リンクと表示されるテキスト変更してください。VALUE アトリビュートの中には、フルパスの URL を入れる事もできます。

Value アトリビュート の中にあるボタンのテキストを変更します
<INPUT TYPE=BUTTON VALUE="Go" ...

プログラム上の注意

実際の JavaScript はボタンの onClick ハンドラーの中にあります。JavaScript 配列 this.form.menu.options は、"menu"と名付けられたフォームにある、オプションタグ(とその内容)の配列です。どのメニュー項目が選択されているかを見つけるには、プロパティthis.form.menu.selectedIndexを使います。ここに、選択された項目のインデックスが保持されています。

それから、this.form.menu.options[this.form.menu.selectedIndex].valueの式で配列の中から選択されている項目の属性値にアクセスしてページの名前を入手します。

top.location.href は、ウィンドウに表示される URL のアドレスです。我々は、top.locationに新しいページの URLを含むようセットしているので、我々のページがフレームの中にあっても新しいページがウィンドウ全体に表示されます。ページが特定のフレームに表示されるようにするのは、読者への宿題にしておきましょう 。 (もうひとつの JavaScript ポップアップメニューにあるプログラム上の注意をチェックするとヒントが書かれています)